<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="增删改查.css">
    <!-- <link rel="import" href="编辑.html" id="page1"> -->
</head>
<style>
    .td {
        border-bottom: 1px solid #e7eaec !important;
        font-size: 13px;
        padding: 8px;
        position: relative;
    }

    .bj {
        text-decoration: none;
        margin-right: 5px;
        /* position: absolute;
        right:100px; */
        /* float: left; */
        display: inline-block;
        width: 36px;
        height: 18px;
        padding-top: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 1px;
        background-color: #1c84c6;
        border-color: #1c84c6;
        color: #fff;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border: 1px solid transparent;
    }

    .clear {
        text-decoration: none;
        /* position: absolute;
        right: 200px; */
        /* float: left; */
        background-color: #ed5565;
        border-color: #ed5565;
        color: #fff;
        border-radius: 3px;
        display: inline-block;
        width: 33.438px;
        height: 18px;
        text-decoration: none;
        padding-left: 5px;
        padding-top: 1px;
        padding-right: 5px;
        padding-bottom: 1px;
        color: #fff;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border: 1px solid transparent;
    }

    .ipt1,
    .ipt2,
    .ipt3,
    .ipt4,
    .ipt5,
    .ipt6,
    .ipt7,
    .ipt8 {
        padding: 0;
        border: 0;
        outline: none;
    }

    .ipt1 {
        width: 57.537px;
        height: 26.563px;
    }

    .ipt2 {
        width: 105.875px;
        height: 26.563px;
    }

    .ipt3 {
        width: 75.237px;
        height: 26.563px;
    }

    .ipt4 {
        width: 76.6px;
        height: 26.563px;
    }

    .ipt5 {
        width: 114.1px;
        height: 26.563px;
    }

    .ipt6 {
        width: 75.237px;
        height: 26.563px;
    }

    .ipt7 {
        width: 170.188px;
        height: 26.563px;
        /* background-color: pink; */
    }

    .ipt8 {}

    .add {

        background-color: #23c6c8;
        border-color: #23c6c8;
        display: inline-block;
        width: 33.438px;
        height: 18px;
        text-decoration: none;

        padding-left: 5px;
        padding-top: 1px;
        padding-right: 5px;
        padding-bottom: 1px;
        color: #fff;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border: 1px solid transparent;
    }
</style>

<body>
    <div class="Main">
        <!-- 左侧导航开始 -->
        <nav>
            <a href="">
                <li>
                    <span>RuoYi</span>
                </li>
            </a>
            <div class="Nav-main">
                <div class="Nav-main-hd">
                    <a href="#" title="个人中心" class="hd-main">
                        <div class="tx">
                            <img src="../登录 增删改查/图片/头像.jpg" alt="">
                        </div>
                        <div class="zt">
                            <p>admin</p>
                            <a href="#" class="hd-main-a">在线</a>
                        </div>
                    </a>
                </div> <!-- 左侧菜单 开始 -->
                <div class="menu">
                    <ul style="height: auto;">
                        <li id="first">
                            <a href="">
                                <span>用户管理</span>
                            </a>
                        </li>
                        <li> <a href="">
                                <span>角色管理</span>
                            </a></li>
                        <li>
                            <a href="">
                                <span>菜单管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span>部门管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span>岗位管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span>字典管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span>参数设置</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span onclick="click()">通知公告</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span onclick="a()">日志管理</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 左侧菜单 结束 -->
            </div>
        </nav>
        <!-- 左侧导航栏结束 -->
        <!-- 右侧部分开始 -->
        <div class="right">
            <div class="right-hd">
                <nav></nav>
            </div>
            <div class="right-tabs"></div>
            <div class="mainContent">
                <div class="mainC-box">
                    <div class="mainC-box-hd">
                        <ul>
                            <li>登录名称<input type="text" id="inputt" value=""></li>

                            <li><a href="javascript:;" id="aaa" onclick="sousuo()">搜索</a></li>
                        </ul>
                    </div>
                    <div class="mainC-box-x">
                        <div class="Main-x">
                            <div class="Main-x-hd">
                                <a href="javascript:;" class="add">新增</a>
                            </div>
                            <div class="Main-x-box">
                                <table>
                                    <thead>
                                        <tr class="one">
                                            <th>
                                                <div class="th-inner">
                                                    <label for="">
                                                        <input type="checkbox" class="c-0">
                                                        <span></span>
                                                    </label>
                                                </div>

                                            </th>
                                            <th>
                                                <div>用户ID</div>
                                            </th>
                                            <th>
                                                <div>登录名称</div>
                                            </th>
                                            <th>
                                                <div>用户名称</div>
                                            </th>
                                            <th>
                                                <div>部门</div>
                                            </th>
                                            <th>
                                                <div>手机</div>
                                            </th>
                                            <th>
                                                <div>用户状态</div>
                                            </th>
                                            <th>
                                                <div>创建时间</div>
                                            </th>
                                            <th>
                                                <div>操作</div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="tr tr01">
                                            <td>
                                                <label for="">
                                                    <input type="checkbox" class="c-1">
                                                </label>
                                            </td>
                                            <td>1</td>
                                            <td class="name">admin</td>
                                            <td>年号</td>
                                            <td>研发部门</td>
                                            <td>15888888888</td>
                                            <td>2021-12-17 18:31:05</td>
                                            <td></td>
                                            <td class="td"><a href="javascript:" onclick="alerte(this)">编辑</a>
                                                <a href="javascript:;" class="clear" onclick="clicks(this)">删除</a>
                                            </td>
                                        </tr>
                                        <tr class="tr tr02">
                                            <td>
                                                <label for="">
                                                    <input type="checkbox" class="c-2">
                                                </label>
                                            </td>
                                            <td>2</td>
                                            <td class="name">ry</td>
                                            <td>若依</td>
                                            <td>测试部门</td>
                                            <td>15666666666</td>
                                            <td>2021-12-17 18:31:05</td>
                                            <td></td>
                                            <td class="td"><a href="javascript:" onclick="alertt(this);">编辑</a>
                                                <a href="javascript:;" class="clear" onclick="clicks(this)">删除</a>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- <div class="footer">
                                <div class="footer-main">
                                    <span>显示第 1 到第 2 条记录，总共 2 条记录</span>
                                    <div class="pageList"></div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧部分结束 -->
    </div>
    <script type="text/javascript">
        document.write(page1.import.body.innerHTML);
    </script>
    <script>
        var c_0 = document.querySelector(".c-0");
        var c_1 = document.querySelector(".c-1");
        var c_2 = document.querySelector(".c-2");
        c_0.addEventListener("click", function () {
            c_1.checked = this.checked;
            c_2.checked = this.checked;
            // console.log(1111111);
        })
        c_1.addEventListener("click", function () {
            if (this.checked == false) {
                c_0.checked = false;
            }
            if (this.checked == true && c_2.checked == true) {
                c_0.checked = true;
            }
        })
        c_2.addEventListener("click", function () {
            if (this.checked == false) {
                c_0.checked = false;
            }
            if (this.checked == true && c_1.checked == true) {
                c_0.checked = true;
            }
        })

        function a() {
            alert(11);
        }
        //  var clear = document.querySelector(".clear");
        var trs = document.querySelectorAll('tr');
        // for(i=0;i<trs.length;i++){
        //    var tds=trs[i].querySelectorAll('td');
        //   var as = trs[i].lastElementChild.querySelectorAll('a');
        function clicks(a) {
            console.log(a.parentNode.parentNode);
            var click = a.parentNode.parentNode;
            var clickP = click.parentNode;
            clickP.removeChild(click);
            //  tbody.removeChild(a.parentNode.parentNode);
            //   if (c_2.checked) {
            //       tbody.removeChild(a.parentNode.parentNode);
            //   }

            // alert("Hello World!");
        }
        // }
        var tr1 = document.getElementById("tr");
        var td1 = document.querySelector('.td');
        var table = document.querySelector('table');
        var tbody = document.querySelector("tbody");

        // 增   var i=12;   
        var add = document.querySelector('.add');
        add.addEventListener('click', function () {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            tr.style.width = '1077.4px';
            tr.style.height = '43.563px';
            tr.style.backgroundColor = 'pink';
            var td1 = document.createElement('td');
            tr.appendChild(td1);
            td1.style.width = '20px';
            td1.style.height = '26.563px';
            td1.style.padding = '8px';
            td1.innerHTML = ' <input type="checkbox" class="c-1">'
            var td2 = document.createElement('td');
            tr.appendChild(td2);
            td2.style.width = '57.537px';
            td2.style.height = '26.563px';
            td2.style.padding = '8px';
            td2.innerHTML = '<td><input type="text" class="ipt1"></td>'
            var td3 = document.createElement('td');
            tr.appendChild(td3);
            td3.innerHTML = '<td><input type="text" class="ipt2"></td>'
            td3.style.width = '105.875px';
            td3.style.height = '26.563px';
            td3.style.padding = '8px';
            var td4 = document.createElement('td');
            tr.appendChild(td4);
            td4.innerHTML = '<td><input type="text" class="ipt3"></td>'
            td4.style.width = '75.237px';
            td4.style.height = '26.563px';
            td4.style.padding = '8px';
            var td5 = document.createElement('td');
            tr.appendChild(td5);
            td5.innerHTML = '<td><input type="text" class="ipt4"></td>'
            td5.style.width = '76.6px';
            td5.style.height = '26.563px';
            td5.style.padding = '8px';
            var td6 = document.createElement('td');
            tr.appendChild(td6);
            td6.innerHTML = '<td><input type="text" class="ipt5"></td>'
            td6.style.width = '114.1px';
            td6.style.height = '26.563px';
            td6.style.padding = '8px';
            var td7 = document.createElement('td');
            tr.appendChild(td7);
            td7.innerHTML = '<td><input type="text" class="ipt6"></td>'
            td7.style.width = '75.237px';
            td7.style.height = '26.563px';
            td7.style.padding = '8px';
            var td8 = document.createElement('td');
            tr.appendChild(td8);
            td8.innerHTML = '<td><input type="text" class="ipt7"></td>'
            td8.style.width = '170.188px';
            td8.style.height = '26.563px';
            td8.style.padding = '8px';
            // var td9 = document.createElement('td');
            // tr.appendChild(td9);
            // td9.innerHTML = '<td></td>'
            // td9.style.width = '238.625px';
            // td9.style.height = '26.563px';
            // td9.style.padding = '8px';
            var td10 = document.createElement('td');
            tr.appendChild(td10);
            // <a href="javascript:;" onclick="alerttt(this)" class="bj">编辑</a>
            td10.innerHTML ='<td class="td"><a href="javascript:;" class="clear" onclick="clicks(this)">删除</a></td>';
            td10.style.width = '238.625px';
            td10.style.height = '26.563px';
            td10.style.padding = '8px';
            //  i+=9;
            // alerttt();
        })
        // 编辑
        
        // function alerttt(){
        //     var name = document.getElementsByTagName("td")[i];
        //     var namee = prompt("请输入修改的名字");
        //     name.innerHTML = namee;
        //     var bumen = document.getElementsByTagName("td")[i+1];
        //     var bumenn = prompt("请输入修改的部门");
        //     bumen.innerHTML = bumenn;
        //     var phone = document.getElementsByTagName("td")[i+2];
        //     var phonee = prompt("请输入修改的手机号码");
        //     phone.innerHTML = phonee;
            
        // }
        // var tds = document.querySelector('.tr').querySelectorAll('td');
        // var name = document.querySelector('.name');
        // var phone = document.querySelector('.phone');
        // var bumen = document.querySelector('.bumen');
        // tds[3].innerHTML = name.value;
        // tds[4].innerHTML = bumen.value;
        // tds[5].innerHTML = phone.value;
        // 编辑

        function alerte(b) {
            var name = document.getElementsByTagName("td")[3];
            var namee = prompt("请输入修改的名字");
            name.innerHTML = namee;
            var bumen = document.getElementsByTagName("td")[4];
            var bumenn = prompt("请输入修改的部门");
            bumen.innerHTML = bumenn;
            var phone = document.getElementsByTagName("td")[5];
            var phonee = prompt("请输入修改的手机号码");
            phone.innerHTML = phonee;
        }

        function alertt(b) {
            var name1 = document.getElementsByTagName("td")[12];
            var namee1 = prompt("请输入修改的名字");
            name1.innerHTML = namee1;
            var bumen1 = document.getElementsByTagName("td")[13];
            var bumenn1 = prompt("请输入修改的部门");
            bumen1.innerHTML = bumenn1;
            var phone1 = document.getElementsByTagName("td")[14];
            var phonee1 = prompt("请输入修改的手机号码");
            phone1.innerHTML = phonee1;
        }
        // 查询

        function sousuo() {
            var inputt = document.getElementById('inputt');
            var aaa = document.querySelector('#aaa');
            var tr01 = document.querySelector('.tr01');
            var tr02 = document.querySelector('.tr02');
            var one = document.querySelector('.one');
            // alert(11); 
            // console.log(value);
            //  inputt.value='123';
            //  console.log(inputt.value);
            if (inputt.value == 'admin' || inputt.value == 'a' || inputt.value == 'ad' || inputt.value == 'adm' ||
                inputt.value == 'admi') {
                // alert(11);
                tr02.style.display = 'none';
                tr01.style.display = 'block';
                one.style.display = 'block';
            } else if (inputt.value == 'ry' || inputt.value == 'r' || inputt.value == 'y') {
                // alert(11);
                tr01.style.display = 'none';
                tr02.style.display = 'block';
                one.style.display = 'block';
            } else {
                // tr02.style.display='none';
                // tr01.style.display='none';
                tr02.style.display = 'block';
                tr01.style.display = 'block';
                one.style.display = 'block';
                alert('未查到该用户');
            }
        }
    </script>
</body>

</html>